<template>
    <el-card>
        <!-- 标题栏 -->
        <div class="box">
            <div class="short"></div>
            <div>医生详情</div>
        </div>

        <!-- 医生信息容器 -->
        <div class="doctor-info-container">
            <h3 class="section-title">医生信息</h3>

            <!-- 第一行：占满整行的信息（编号、姓名、头像、电话） -->
            <div class="info-row first-row">
                <!-- 医生编号 -->
                <div class="first-row-item">
                    <span class="info-label">医生编号</span>
                    <span class="info-value id">{{ DoctorData?._id }}</span>
                </div>

                <!-- 医生姓名 -->
                <div class="first-row-item">
                    <span class="info-label">医生姓名</span>
                    <span class="info-value">{{ DoctorData?.name }}</span>
                </div>

                <!-- 医生头像 -->
                <div class="first-row-item avatar-item">
                    <span class="info-label">医生头像</span>
                    <el-avatar :size="60" :src="DoctorData?.avatar" class="avatar" />
                </div>

                <!-- 联系电话 -->
                <div class="first-row-item phone-item">
                    <span class="info-label">联系电话</span>
                    <span class="info-value" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        {{ DoctorData?.phone }}
                    </span>
                </div>
            </div>

            <!-- 医生简介 -->
            <div class="info-row full-width-item">
                <span class="info-label">医生简介</span>
                <div class="info-value">
                    <div v-if="DoctorData?.intro && DoctorData.intro !== '无'">
                        {{ DoctorData.intro.replace(/\n/g, '<br>') }}
                    </div>
                    <div v-else>无</div>
                </div>
            </div>

            <!-- 医生擅长 -->
            <div class="info-row full-width-item">
                <span class="info-label">医生擅长</span>
                <div class="info-value">
                    <div v-if="DoctorData?.skill">{{ DoctorData.skill }}</div>
                    <div v-else>无</div>
                </div>
            </div>

            <!-- 加入团队 -->
            <div class="info-row full-width-item">
                <span class="info-label">加入团队</span>
                <div class="info-value">
                    <div v-for="(item, index) in DoctorData?.teams" :key="index" style="line-height: 24px;">
                        {{ item }}
                    </div>
                    <div v-if="!DoctorData?.teams || DoctorData.teams.length === 0">无</div>
                </div>
            </div>

            <!-- 签约人数 -->
            <div class="info-row full-width-item">
                <span class="info-label">签约人数</span>
                <div class="info-value">
                    {{ DoctorData?.signNumber || 0 }}
                </div>
            </div>

            <!-- 医生评分 -->
            <div class="info-row full-width-item">
                <span class="info-label">医生评分</span>
                <div class="info-value">
                    {{
                        DoctorData?.rate
                            ? `${DoctorData.rate}（900人评价）`
                            : '4.9（900人评价）'
                    }}
                </div>
            </div>

            <!-- 创建时间 -->
            <div class="info-row full-width-item">
                <span class="info-label">创建时间</span>
                <div class="info-value">
                    {{ DoctorData?.roleId?.createTime || '2021-06-06 10:38:12' }}
                </div>
            </div>

            <!-- 创建人 -->
            <div class="info-row full-width-item">
                <span class="info-label">创建人</span>
                <div class="info-value">
                    {{ DoctorData?.creator }}
                </div>
            </div>

            <!-- 账号状态 -->
            <div class="info-row full-width-item">
                <span class="info-label">账号状态</span>
                <div class="info-value">
                    <el-switch v-model="switchValue" active-text="启用" inactive-text="禁用" :active-value="false"
                        :inactive-value="true" inline-prompt
                        style="--el-switch-on-color:#13ec66; --el-switch-off-color: #ccc"></el-switch>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary">发送消息</el-button>
                <el-button type="primary" @click="$router.push({
                    path: '/data/doctor/add',
                    query: { _id: DoctorData._id }
                })">编辑医生信息</el-button>
                <el-button type="danger" @click="deleteDoctor(DoctorData._id)">删除</el-button>
                <el-button @click="$router.back">返回</el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { deleteDoctorApi, getDoctorInfoApi } from '../../../api/doctorManage';
import { useRoute } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';

const switchValue = ref(false);
const route = useRoute();
const DoctorData = ref({});

onMounted(() => {
    getDoctorInfo();
});
//获取医生详情方法
function getDoctorInfo() {
    getDoctorInfoApi({
        _id: route.query._id,
    })
        .then((res) => {
            if (res.code === 200) {
                DoctorData.value = res.data;
            }
        })
        .catch((err) => {
            console.error('获取医生信息失败：', err);
        });
}
//删除医生
function deleteDoctor(id) {
    ElMessageBox.confirm(
        '该操作不可撤销，确认删除吗？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        return deleteDoctorApi({ _id: id })
    })
        .then(res => {
            if (res.code === 200) {
                ElMessage.success('删除成功！')
                // 重新加载数据
                // getDoctors()
            } else {
                throw new Error('删除失败')
            }
        }).catch(err => {
            if (err.name !== 'Cancel') { // 排除用户取消的情况
                console.error('删除失败：', err)
                ElMessage.error('删除失败，请重试')
            }
        })
}
</script>

<style scoped lang="scss">
.box {
    display: flex;
    align-items: center;
    border-bottom: 1px #f3f7fb solid;
    padding: 20px;

    div {
        font-size: 18px;
    }
}

.short {
    width: 6px;
    height: 20px;
    background-color: var(--el-color-primary);
    border-radius: 8px;
    margin-right: 10px;
}

.doctor-info-container {
    padding: 20px;

    .section-title {
        margin: 0 0 20px 0;
        color: #333;
        font-size: 16px;
    }

    // 所有行的基础样式
    .info-row {
        margin-bottom: 15px;
        line-height: 40px;

        .info-label {
            display: inline-block;
            width: 100px; // 固定标签宽度，统一对齐
            font-weight: 400;
            color: #999999;
        }

        .info-value {
            color: #333;
            white-space: pre-line;
        }
    }

    // 第一行：占满整行的布局
    .first-row {
        display: flex;
        justify-content: space-between; // 项目均匀分布，占满整行
        align-items: center; // 垂直居中
        width: 100%; // 强制占满容器宽度
        padding-right: 20px; // 右侧留一点边距，避免贴边
    }

    // 第一行的每个项目（按比例分配宽度）
    .first-row-item {
        flex: 1; // 每个项目占相同宽度
        display: flex;
        align-items: center;
        gap: 10px; // 标签与内容的间距
        min-width: 0; // 允许内容收缩，避免挤压
    }

    // 头像项单独调整（与其他项目对齐）
    .avatar-item {
        align-items: flex-end; // 头像底部与文字对齐
        padding-bottom: 5px; // 微调位置，匹配行高

        .avatar {
            // 固定头像大小，避免拉伸
            width: 40px;
            height: 40px;
        }
    }

    // 电话项内容区自适应宽度
    .phone-item .info-value {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    // 占满一行的项（简介、擅长等）
    .full-width-item {
        display: flex;

        .info-value {
            flex: 1;
        }
    }

    .action-buttons {
        margin-top: 30px;

        .el-button {
            margin: 0 5px;
        }
    }
}

// 医生编号超出隐藏
.id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>